<template>
    <div>
        <el-menu default-active="2" class="el-menu-vertical-demo" router>
            <template v-for="item in menusList">
                <el-menu-item v-if="!item.children" :index="item.path" :key="item.path">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{ item.authName }}</span>
                </el-menu-item>

                <el-submenu v-else :index="item.path" :key="item.path + '1'">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{ item.authName }}</span>
                    </template>
                    <el-menu-item :index="it.path" v-for="it in item.children" :key="it.path">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{it.authName}}</span>
                    </el-menu-item>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: 'MyAppMenus',

    data() {
        return {
            menusList: [
                {
                    "authName": "数据分析",
                    "path": '/analysis',
                },
                {
                    "authName": "用户列表",
                    "path": '/manage',
                },
                {
                    "authName": "订单管理",
                    "path": '/order',
                },
                {
                    "authName": "菜单管理",
                    "path": '/menu',
                },
                {
                    "authName": "员工管理",
                    "path": '/user',
                    "children": [
                        {
                            "authName": "员工详情",
                            "path": '/userDetail',
                        },
                        {
                            "authName": "其他页面",
                            "path": '/other',
                        },
                    ]
                },
            ]
        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>

</style>